<script setup>
import { onMounted, ref, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

const cpuUsage = ref(30)
const memoryUsage = ref(40)
const isTaskRunning = ref(false)
const defaultValues = {
  cloud: { value: 30, range: 5 },
  edge: { value: 30, range: 5 },
  center: { value: 30, range: 5 }
}

// 添加图表实例的声明
let cpuChart = null
let memoryChart = null

const props = defineProps({
  currentLi: String,
  strategyType: String,
  subStrategyType: String,
  taskRunning: Boolean
})

const initCharts = () => {
  cpuChart = echarts.init(document.getElementById('cpuChart'))
  memoryChart = echarts.init(document.getElementById('memoryChart'))

  const cpuOption = {
    title: { 
      text: 'CPU 使用率',
      textStyle: {
        color: '#7ecbcf',
        fontSize: 12,
        fontWeight: 'normal'
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b}: {c}%'
    },
    grid: {
      top: '25%',
      left: '15%',
      right: '15%',
      bottom: '12%'
    },
    xAxis: { 
      data: ['省侧云', '总部云', '边侧'],
      axisLabel: { 
        color: '#a8c1c3',
        fontSize: 10
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: { 
      max: 100,
      axisLabel: { 
        color: '#a8c1c3',
        fontSize: 10
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(62, 172, 180, 0.1)'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [{
      name: 'CPU',
      type: 'bar',
      data: [
        {
          value: defaultValues.cloud.value,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#3eacb4' },
              { offset: 1, color: 'rgba(9, 196, 202, 0.3)' }
            ])
          }
        },
        {
          value: defaultValues.center.value,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#7ecbcf' },
              { offset: 1, color: 'rgba(126, 203, 207, 0.3)' }
            ])
          }
        },
        {
          value: defaultValues.edge.value,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#f29701' },
              { offset: 1, color: 'rgba(242, 151, 1, 0.3)' }
            ])
          }
        }
      ],
      barWidth: '40%',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(62, 172, 180, 0.05)'
      }
    }]
  }

  const memoryOption = {
    title: { 
      text: '显存使用率',
      textStyle: {
        color: '#7ecbcf',
        fontSize: 12,
        fontWeight: 'normal'
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b}: {c}%'
    },
    grid: {
      top: '25%',
      left: '15%',
      right: '15%',
      bottom: '12%'
    },
    xAxis: { 
      data: ['省侧云', '总部云', '边侧'],
      axisLabel: { 
        color: '#a8c1c3',
        fontSize: 10
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: { 
      max: 100,
      axisLabel: { 
        color: '#a8c1c3',
        fontSize: 10
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(62, 172, 180, 0.1)'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [{
      name: '内存',
      type: 'bar',
      data: [
        {
          value: defaultValues.cloud.value,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#3eacb4' },
              { offset: 1, color: 'rgba(9, 196, 202, 0.3)' }
            ])
          }
        },
        {
          value: defaultValues.center.value,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#7ecbcf' },
              { offset: 1, color: 'rgba(126, 203, 207, 0.3)' }
            ])
          }
        },
        {
          value: defaultValues.edge.value,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#f29701' },
              { offset: 1, color: 'rgba(242, 151, 1, 0.3)' }
            ])
          }
        }
      ],
      barWidth: '40%',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(62, 172, 180, 0.05)'
      }
    }]
  }

  cpuChart.setOption(cpuOption)
  memoryChart.setOption(memoryOption)
}

const updateData = () => {
  if (!props.taskRunning) {
    updateCharts({
      cloud: moveTowardsDefault(cpuChart.getOption().series[0].data[0].value, defaultValues.cloud.value),
      center: moveTowardsDefault(cpuChart.getOption().series[0].data[1].value, defaultValues.center.value),
      edge: moveTowardsDefault(cpuChart.getOption().series[0].data[2].value, defaultValues.edge.value)
    }, {
      cloud: moveTowardsDefault(memoryChart.getOption().series[0].data[0].value, defaultValues.cloud.value),
      center: moveTowardsDefault(memoryChart.getOption().series[0].data[1].value, defaultValues.center.value),
      edge: moveTowardsDefault(memoryChart.getOption().series[0].data[2].value, defaultValues.edge.value)
    })
  } else {
    let cloudRange, edgeRange, centerRange

    // 根据不同任务类型设置不同的资源占用范围
    switch (props.currentLi) {
      case 'start': // 云侧模型增量学习
        cloudRange = { min: 75, max: 95, target: 85 }  // 云侧资源占用高
        edgeRange = { min: 30, max: 40, target: 35 }   // 边侧资源占用低
        centerRange = { min: 70, max: 90, target: 80 }  // 中心资源占用较高
        break
        
      case 'evolution': // 云边模型协同进化
        cloudRange = { min: 70, max: 90, target: 80 }  // 云侧资源占用较高
        edgeRange = { min: 60, max: 80, target: 70 }   // 边侧资源占用较高
        centerRange = { min: 65, max: 85, target: 75 }  // 中心资源占用较高
        break
        
      case 'update': // 云边协同策略配置
      case 'sample': // 云边协同推理
        if (props.strategyType === '10') { // 云边协同推理
          if (props.subStrategyType === '01') { // 云侧优先
            cloudRange = { min: 60, max: 80, target: 70 }  // 云侧资源占用中等偏高
            edgeRange = { min: 30, max: 50, target: 40 }   // 边侧资源占用低
            centerRange = { min: 55, max: 75, target: 65 }  // 中心资源占用中等
          } else { // 边侧优先
            cloudRange = { min: 30, max: 50, target: 40 }  // 云侧资源占用低
            edgeRange = { min: 60, max: 80, target: 70 }   // 边侧资源占用中等偏高
            centerRange = { min: 35, max: 55, target: 45 }  // 中心资源占用低
          }
        } else if (props.strategyType === '00') { // 边侧推理
          cloudRange = { min: 20, max: 40, target: 30 }  // 云侧资源占用很低
          edgeRange = { min: 75, max: 95, target: 85 }   // 边侧资源占用很高
          centerRange = { min: 25, max: 45, target: 35 }  // 中心资源占用低
        }
        break
        
      case 'reasoning': // 边侧设备推理
        cloudRange = { min: 20, max: 35, target: 25 }  // 云侧资源占用很低
        edgeRange = { min: 70, max: 90, target: 80 }   // 边侧资源占用高
        centerRange = { min: 20, max: 35, target: 25 }  // 中心资源占用很低
        break
        
      case 'upload': // 边侧难辨样本上传
        cloudRange = { min: 40, max: 60, target: 50 }  // 云侧资源占用中等
        edgeRange = { min: 50, max: 70, target: 60 }   // 边侧资源占用中等偏高
        centerRange = { min: 45, max: 65, target: 55 }  // 中心资源占用中等
        break
        
      case 'assessment': // 云边进化模型评估
        cloudRange = { min: 55, max: 75, target: 65 }  // 云侧资源占用中等偏高
        edgeRange = { min: 50, max: 70, target: 60 }   // 边侧资源占用中等偏高
        centerRange = { min: 60, max: 80, target: 70 }  // 中心资源占用较高
        break
        
      case 'issued': // 进化模型下发边侧
        cloudRange = { min: 45, max: 65, target: 55 }  // 云侧资源占用中等
        edgeRange = { min: 55, max: 75, target: 65 }   // 边侧资源占用中等偏高
        centerRange = { min: 50, max: 70, target: 60 }  // 中心资源占用中等
        break
        
      default:
        cloudRange = { min: 30, max: 50, target: 40 }
        edgeRange = { min: 30, max: 50, target: 40 }
        centerRange = { min: 30, max: 50, target: 40 }
    }

    if (cloudRange && edgeRange && centerRange) {
      updateCharts({
        cloud: moveTowardsTarget(cpuChart.getOption().series[0].data[0].value, cloudRange),
        center: moveTowardsTarget(cpuChart.getOption().series[0].data[1].value, centerRange),
        edge: moveTowardsTarget(cpuChart.getOption().series[0].data[2].value, edgeRange)
      }, {
        cloud: moveTowardsTarget(memoryChart.getOption().series[0].data[0].value, cloudRange),
        center: moveTowardsTarget(memoryChart.getOption().series[0].data[1].value, centerRange),
        edge: moveTowardsTarget(memoryChart.getOption().series[0].data[2].value, edgeRange)
      })
    }
  }
}

const moveTowardsTarget = (currentValue, range) => {
  const target = range.target || (range.min + range.max) / 2
  const step = 2 + Math.random() * 3
  
  if (Math.abs(currentValue - target) < step) {
    return target + (Math.random() * 2 - 1) * (range.max - range.min) * 0.1
  }
  
  return currentValue + (currentValue < target ? step : -step)
}

const moveTowardsDefault = (currentValue, defaultValue) => {
  const step = 1 + Math.random() * 2
  if (Math.abs(currentValue - defaultValue) < step) {
    return defaultValue + (Math.random() * 2 - 1) * 2
  }
  return currentValue + (currentValue < defaultValue ? step : -step)
}

const updateCharts = (cpuValues, memoryValues) => {
  if (cpuChart && memoryChart) {
    cpuChart.setOption({
      series: [{
        data: [
          {
            value: cpuValues.cloud,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#3eacb4' },
                { offset: 1, color: 'rgba(9, 196, 202, 0.3)' }
              ])
            }
          },
          {
            value: cpuValues.edge,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#f29701' },
                { offset: 1, color: 'rgba(242, 151, 1, 0.3)' }
              ])
            }
          },
          {
            value: cpuValues.center,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#7ecbcf' },
                { offset: 1, color: 'rgba(126, 203, 207, 0.3)' }
              ])
            }
          }
        ]
      }]
    })

    memoryChart.setOption({
      series: [{
        data: [
          {
            value: memoryValues.cloud,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#3eacb4' },
                { offset: 1, color: 'rgba(9, 196, 202, 0.3)' }
              ])
            }
          },
          {
            value: memoryValues.edge,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#f29701' },
                { offset: 1, color: 'rgba(242, 151, 1, 0.3)' }
              ])
            }
          },
          {
            value: memoryValues.center,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#7ecbcf' },
                { offset: 1, color: 'rgba(126, 203, 207, 0.3)' }
              ])
            }
          }
        ]
      }]
    })
  }
}

watch(
  [
    () => props.currentLi,
    () => props.strategyType,
    () => props.subStrategyType,
    () => props.taskRunning
  ],
  () => {
    updateData()
  }
)

let timer = null

onMounted(() => {
  initCharts()
  timer = setInterval(updateData, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
  if (cpuChart) cpuChart.dispose()
  if (memoryChart) memoryChart.dispose()
})
</script>

<template>
  <div class="resource-usage">
    <h3>资源使用情况</h3>
    <div id="cpuChart" class="chart"></div>
    <div id="memoryChart" class="chart"></div>
  </div>
</template>

<style lang="scss" scoped>
.resource-usage {
  height: 100%;
  color: rgba(255, 255, 255, 0.8);
  
  h3 {
    margin-bottom: 15px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    color: #7ecbcf;
    letter-spacing: var(--letter-spacing-base);
  }
  
  .chart {
    width: 100%;
    height: 40%;
    margin-bottom: 10px;
    opacity: 0.8;
  }
}
</style> 